<template>
    <div class="article">
        <Card>
            <Row>
                <Form :model="article" :label-width="80" inline>
                    <FormItem prop="title" label="文章名称">
                        <Input type="text" v-model="article.title" placeholder="请输入文章名称">
                        </Input>
                    </FormItem>
                    <FormItem prop="articleStatus" label="文章状态" style="width: 280px">
                        <Select v-model="article.articleStatus" clearable>
                            <Option :value="0">草稿箱</Option>
                            <Option :value="1">已发布</Option>
                            <Option :value="2">已删除</Option>
                        </Select>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="search" style="margin-right: 15px">搜索</Button>
                        <Button type="default" @click="reset">重置</Button>
                    </FormItem>
                </Form>
            </Row>
            <Row style="margin-bottom: 15px">
                <Button type="primary" @click="post">写文章</Button>
            </Row>
            <Table :columns="articleColumns" :data="articleData">
                <template #action="{ row, index }">
                    <Button type="warning" size="small" style="margin-right: 5px" @click="view(row)">预览</Button>
                    <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">编辑</Button>
                    <Button type="error" size="small" style="margin-right: 5px" @click="remove(row)">删除</Button>
                </template>
            </Table>
            <Page @on-change="pageChange" :total="total" :pageSize="10" show-total style="text-align: right; margin-top: 15px;"/>
            <Modal
                v-model="removeShow"
                title="删除"
                @on-ok="removeOK">
                <p>确定删除【{{target.title}}】文章吗?</p>
            </Modal>
        </Card>
    </div>
</template>

<script>
import moment from 'moment'

export default {
    name: 'other',
    methods: {
        // 删除
        remove(item) {
            this.target = item
            this.removeShow = true
        },
        // 删除确定
        async removeOK() {
            const res = await this.$api.articleDelete(this.target.id)
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            await this.articlePage()
        },
        // 编辑文章
        edit(row) {
            this.$router.push({ name: 'post', query: { articleId: row.id } })
        },
        // 写文章
        post() {
            this.$router.push({ name: 'post' })
        },
        // 搜索
        search() {
            const param = {
                ...this.article,
            }
            this.articlePage(param)
        },
        // 重置
        reset() {
            this.articlePage()
        },
        // 加载数据源
        async dataSource() {
            await this.categoryData()
            await this.tagData()
        },
        // 分类数据源
        async categoryData() {
            const res = await this.$api.categoryList()
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.categoryList = res.data
        },
        // 标签数据源
        async tagData() {
            const res = await this.$api.tagList()
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.tagList = res.data
        },
        // 文章分页列表
        async articlePage(params) {
            const { current, size } = this
            const param = {
                current,
                size,
                ...params,
            }
            const res = await this.$api.articlePage(param)
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.articleData = res.data.records
            this.total = res.data.total
        },
        // 分页切换
        async pageChange(page) {
            const params = {
                current: page,
                size: 10,
            }
            await this.articlePage(params)
        },
        // 过滤
        filterColumn(dataSource, target) {
            // eslint-disable-next-line no-return-assign
            const targetArr = this[dataSource].filter(item => item.id == target)
            return targetArr
        },
        // 预览
        view(article) {
            let routeData = this.$router.resolve({ path: '/detail', query: { articleId: article.id } })
            window.open(routeData.href, '_blank')
        },
        init() {
            this.dataSource()
            // 分类分页列表
            this.articlePage()
        },
    },
    mounted() {
        this.init()
    },
    data() {
        const self = this
        return {
            // 目标数据
            target: {},
            // 文章删除提示
            removeShow: false,
            // 文章搜索
            article: {

            },
            // 页码
            current: 1,
            // 页长
            size: 10,
            // 总数
            total: 0,
            // 文章列表列
            articleColumns: [
                {
                    title: '标题',
                    key: 'title',
                    tooltip: true,
                },
                {
                    title: '状态',
                    key: 'articleStatus',
                    render: (h, params) => {
                        let text = ''
                        let color = ''
                        switch (params.row.articleStatus) {
                            case 0:
                                text = '草稿箱'
                                color = 'warning'
                                break
                            case 1:
                                text = '已发布'
                                color = 'success'
                                break
                            case 2:
                                text = '已删除'
                                color = 'error'
                                break
                            default:
                                text = '草稿箱'
                                color = 'warning'
                                break
                        }
                        return h('Tag', {
                            props: {
                                color,
                                type: 'dot',
                            },
                        }, text)
                    },
                },
                {
                    title: '分类',
                    key: 'catId',
                    render: (h, params) => {
                        let text = ''
                        const catId = params.row.catId
                        const catIdArray = self.filterColumn('categoryList', catId)
                        if (catIdArray) {
                            text = catIdArray[0].catName
                        }
                        return h('div', {
                        }, text)
                    },
                },
                {
                    title: '标签',
                    key: 'tagIds',
                    render: (h, params) => {
                        const tagIds = params.row.tagIds
                        if (!tagIds) {
                            return {}
                        }
                        let components = []
                        tagIds.forEach(item => {
                            const tagIdArray = self.filterColumn('tagList', item)
                            const tag = tagIdArray[0]
                            const component = h('Tag', {
                                props: {
                                    color: tag ? tag.color : '',
                                },
                            }, tag ? tag.tagName : '')
                            components.push(component)
                        })
                        return h('div', components)
                    },
                },
                {
                    title: '访问',
                    key: 'view',
                },
                {
                    title: '发布时间',
                    key: 'updateTime',
                    render: (h, params) => {
                        const text = moment(params.row.updateTime).format('yyyy-MM-DD HH:mm:ss')
                        return h('div', {
                        }, text)
                    },
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 200,
                    align: 'center',
                },
            ],
            // 文章列表数据
            articleData: [],
            // 分类数据源
            categoryList: [],
            // 标签数据源
            tagList: [],
        }
    },
}
</script>

<style>

</style>
